<template>
  <view class="container">
    <!-- 医生信息 -->
    <view class="doctor-info">
      <van-cell :title="doctorName" :label="departmentName" />
    </view>
    
    <!-- 就诊卡信息 -->
    <view class="card-info" v-if="cardName">
      <van-cell :title="cardName" label="就诊卡" />
    </view>

    <!-- 日期选择 -->
    <view class="date-section">
      <van-cell title="选择日期" :border="false" />
      <van-calendar
        v-model:show="showCalendar"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onDateConfirm"
        @close="showCalendar = false"
      />
      <van-cell
        title="就诊日期"
        :value="selectedDate || '请选择日期'"
        is-link
        @click="showCalendar = true"
      />
    </view>

    <!-- 时间段选择 -->
    <view class="time-section" v-if="selectedDate">
      <van-cell title="选择时间段" :border="false" />
      <van-radio-group v-model="selectedTimeSlot">
        <van-cell-group>
          <van-cell
            v-for="slot in availableTimeSlots"
            :key="slot.id"
            :title="slot.period"
            :label="`${slot.time} | 剩余${slot.available}个`"
            clickable
            @click="selectedTimeSlot = slot.id"
          >
            <template #right-icon>
              <van-radio :name="slot.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </view>

    <!-- 底部确认按钮 -->
    <view class="bottom-action">
      <van-submit-bar
        :price="fee * 100"
        button-text="确认预约"
        @submit="confirmAppointment"
        :disabled="!selectedDate || !selectedTimeSlot"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface TimeSlot {
  id: string;
  period: string;
  time: string;
  available: number;
}

const doctorId = ref("");
const doctorName = ref("");
const departmentName = ref("");
const fee = ref(0);
const cardId = ref("");
const cardName = ref("");

const showCalendar = ref(false);
const selectedDate = ref("");
const selectedTimeSlot = ref("");

const minDate = new Date();
const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);

const availableTimeSlots = ref<TimeSlot[]>([
  {
    id: "morning1",
    period: "上午",
    time: "08:00-09:00",
    available: 5
  },
  {
    id: "morning2", 
    period: "上午",
    time: "09:00-10:00",
    available: 3
  },
  {
    id: "morning3",
    period: "上午",
    time: "10:00-11:00",
    available: 0
  },
  {
    id: "afternoon1",
    period: "下午", 
    time: "14:00-15:00",
    available: 8
  },
  {
    id: "afternoon2",
    period: "下午",
    time: "15:00-16:00",
    available: 6
  }
]);

const onDateConfirm = (date: Date) => {
  selectedDate.value = date.toISOString().split('T')[0];
  showCalendar.value = false;
  selectedTimeSlot.value = "";
};

const confirmAppointment = () => {
  if (!selectedDate.value || !selectedTimeSlot.value) {
    uni.showToast({
      title: "请选择日期和时间",
      icon: "none"
    });
    return;
  }

  const selectedSlot = availableTimeSlots.value.find(slot => slot.id === selectedTimeSlot.value);
  
  uni.navigateTo({
    url: `/pages/appointment/payment?doctorId=${doctorId.value}&doctorName=${doctorName.value}&departmentName=${departmentName.value}&date=${selectedDate.value}&time=${selectedSlot?.time}&fee=${fee.value}`
  });
};

onLoad((options: any) => {
  doctorId.value = options.doctorId || "";
  doctorName.value = options.doctorName || "";
  departmentName.value = options.departmentName || "";
  fee.value = Number(options.fee) || 0;
  cardId.value = options.cardId || "";
  cardName.value = options.cardName || "";
  console.log("选择时间页面 onLoad", options);
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.doctor-info {
  background: white;
  margin-bottom: 16rpx;
}

.date-section,
.time-section {
  background: white;
  margin-bottom: 16rpx;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
</style>